<template>
  <div class="p-4">
    <div @click="onToggleDisabled">{{ disabled }}</div>

    <span>{{ model }}</span>
    <BoForm
      ref="formRef"
      :model="model"
      :columns="columns"
      :disabled="disabled"
    >
    </BoForm>
    <Button @click="onValidate">click me</Button>
  </div>
</template>

<script lang="tsx" setup>
import { BoForm, BoFormProps } from '@/Form';
import { computed, ref, useTemplateRef } from 'vue';
import { Button, Flex } from 'ant-design-vue';

const disabled = ref(false);
const onToggleDisabled = () => {
  disabled.value = !disabled.value;
};

const model: BoFormProps['model'] = ref({
  a: 1,
  b: 2,
  c: '',
  editor: '<p>123</p>',
});

const formRef = useTemplateRef('formRef');
const onValidate = async () => {
  const result = await formRef.value?.validate();
  console.log(result);
};

const columns = computed<BoFormProps['columns']>(() => {
  return [
    {
      title: '测试1',
      dataIndex: 'a',
      valueType: 'input',
      formItemProps: {
        rules: [{ required: true, message: '请输入' }],
      },
    },
    {
      title: '测试2',
      dataIndex: 'b',
      valueType: 'select',
      fieldProps(state) {
        return {
          placeholder: '请选择',
          options: [
            {
              label: 'label1',
              value: 1,
            },
            {
              label: 'label2',
              value: 2,
            },
          ],
        };
      },
    },
    {
      title: '测试3',
      dataIndex: 'c',
      valueType: 'input',
      fieldProps(state) {
        return state.b === 1
          ? {
              placeholder: '请输入',
            }
          : { placeholder: '请选择' };
      },
    },
    {
      title: 'select',
      dataIndex: 's',
      valueType: 'select',
      fieldProps: {
        disabled: true,
        options: [],
      },
    },
    {
      title: '',
      dataIndex: 'submit',
      valueType: 'input',
      render() {
        return (
          <Flex>
            <Button type='primary' htmlType='submit'>
              提交
            </Button>
            <Button>取消</Button>
          </Flex>
        );
      },
    },
    {
      title: 'xxx',
      dataIndex: 'editor',
      valueType: 'editor',
      fieldProps: {
        async uploadImage(file) {
          return {
            status: true,
            url: 'https://fanyiapp.cdn.bcebos.com/cms/image/251c4882ab58867d5795df104f3fcd9e.jpg',
          };
        },
      },
    },
    {
      title: '上传图片',
      dataIndex: 'images',
      valueType: 'image',
      fieldProps: {
        async request(data, config) {
          return {
            data: { url: '123' },
          };
        },
        maxCount: 1,
      },
    },
  ];
});
</script>
